import React, {Component} from 'react'
import Icon from '../icon/Icon'
import {
  mdiAlertCircleOutline,
  mdiAlertOutline,
  mdiCheckCircleOutline,
  mdiInformationOutline,
} from '@mdi/js'
import {ThemeColor} from '../color/ThemeColor'

interface AlertProps {
  id?: string
  className?: string
  classNameContainer?: string
  message: any
  color: ThemeColor
  iconPath?: string
  iconColor?: string
  iconPosition?: 'start' | 'center'
  iconSize?: number
  onClick?: () => void
  href?: string
  target?: '_blank'
}

class Alert extends Component<AlertProps> {
  render() {
    const {
      id,
      className,
      classNameContainer,
      message,
      color,
      iconColor,
      iconPath,
      iconPosition,
      iconSize,
      onClick,
      href,
      target,
    } = this.props

    const classNameResult = className + ' alert ' + color + (onClick ? ' cursor-pointer' : '')

    const getDefaultIcon = () => {
      switch (color) {
        case 'danger':
          return mdiAlertCircleOutline
        case 'success':
          return mdiCheckCircleOutline
        case 'warning':
          return mdiAlertOutline
        default:
          return mdiInformationOutline
      }
    }

    const children = (
      <div className={`d-flex align-items-${iconPosition || 'center'} w-100 ` + classNameResult}>
        <Icon
          path={iconPath ?? getDefaultIcon()}
          color={iconColor}
          size={iconSize ?? 0.67}
          className={'feedback-icon'}
        />
        {message}
      </div>
    )

    if (href) {
      return (
        <a
          href={href}
          target={target}
          className={classNameContainer ? classNameContainer : 'd-flex align-items-center '}
          onClick={onClick}>
          {children}
        </a>
      )
    } else {
      return (
        <div
          id={id}
          className={classNameContainer ? classNameContainer : 'd-flex align-items-center '}
          onClick={onClick}>
          {children}
        </div>
      )
    }
  }
}

export default Alert
